<template>
	<mypopup :on="skupopus" @mask_click="confirm(-2)" @close_click="confirm(-2)">
		<view class="sku_wrap" :style="{ paddingBottom: `${COMMON_VAR.safeAreaInsets_bot}rpx` }">
			<view @click="confirm(-2)" class="com_close">
				<image src="/static/images/com_close.png" mode="widthFix" class="com_close_img"></image>
			</view>

			<view class="sku_info">
				<view class="imgsbox">
					<image class="imgs" :src="stockinfo.spec_img" mode="aspectFill" @click="com_previewImage({ urls: imagelist, current: 1 })"></image>
				</view>
				<view class="info_desc">
					<view class="title ell2">
						{{ goods_data.goods_title }}
					</view>

					<view class="dd">
						<view class="price">
							<smallPrice :min="show_price" :max="show_max_price" bold :r="30" :b="36" :s="30" :m="30"></smallPrice>
						</view>

						<view class="stock">库存 {{ stockinfo.spec_store }}</view>
					</view>
				</view>
			</view>
			<view class="sku_main">
				<view class="sku_content">
					<view class="form_label">
						{{ goods_data.spec_name }}
					</view>
					<view class="sku_list">
						<view @click="click_sku(item, index)" v-for="(item, index) in sku_list" :key="index" class="sku_item" :class="{ on: item.checked }">
							<!-- <image v-if="item.spec_img" class="imgs" :src="item.spec_img" mode="aspectFill">
									</image> -->
							<view class="text ell">
								{{ item.spec_value }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="sku_add">
				<view class="form_label">数量</view>

				<view class="com_add_less_inp">
					<view @click="chang_number('reduce')" class="icons">
						<image src="/static/images/jianshao.png" mode="widthFix" class="com_add_less_inp_img"></image>
					</view>
					<view class="num_wrap">
						<input
							@blur="chang_number('input')"
							@confirm="chang_number('input')"
							type="number"
							v-model="inp_number"
							:style="{ width: inputWid(inp_number) }"
							class="num_input"
						/>
					</view>
					<view @click="chang_number('add')" class="icons">
						<image src="/static/images/jiahao.png" mode="widthFix" class="com_add_less_inp_img"></image>
					</view>
				</view>
			</view>

			<view class="sku_btns">
				<block v-if="order_type == -1">
					<!--  -->
					<view class="com_lr_border_btn">
						<view @click="confirm(0)" class="sbtn is_l color_stauts gray_b wrong_b">
							<view class="ttt">加入购物车</view>
						</view>
						<view @click="confirm(1)" class="sbtn is_r color_stauts gray_b g_b">
							<view class="ttt">立即购买</view>
						</view>
					</view>
				</block>
				<block v-else>
					<btns title="确认" btn_class="" height="78" :padding="[]" @module_btn_click="confirm(order_type)"></btns>
				</block>
			</view>
		</view>
	</mypopup>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myskuselect',
	props: {
		gid: {
			type: [Number, String],
			default: 0,
		},
		skuid: {
			type: [Number, String],
			default: 0,
		},
		spec_number: {
			type: [Number, String],
			default: 1,
		},
		cartype: {
			// // 0 = 商品详情 1 = 购物车
			type: Number,
			default: 0,
		},
		order_type: {
			// 0 = 购物车 1 = 直接购买
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			stockinfo: {},
			sku_list: [],
			inp_number: parseFloat(this.spec_number), // 数量
			skupopus: false,
			goods_data: {},
			show_price: 0, //显示合计
			show_max_price: 0, //显示合计原价
			up_skuid: 0,
			spec_value: '',
			imagelist: [],
			change_req: true,
		};
	},
	created() {
		this.init_pagedata();
	},

	mounted() {},

	watch: {
		skuid: {
			handler(newVal) {
				// console.log(newVal, 'skuid')
				this.get_goods();
			},
			immediate: true,
		},
	},
	computed: {
		// input输入框宽度自适应
		inputWid() {
			return function (value) {
				let l = String(value).length;
				if (l < 4) {
					return '80rpx';
				} else {
					return `${String(value).length * 26.5}` + 'rpx';
				}
			};
		},
	},
	methods: {
		propshow() {
			this.skupopus = true;
		},
		prophide() {
			this.skupopus = false;
		},

		//获取商品详情
		get_goods() {
			let _this = this;
			_this.com_getdata({
				url: '/mall/info',
				id_name: 'user_id',
				data: {
					id: _this.gid,
				},
				data_handle_on: false,
				method: 'GET',
				data_fun: function (res) {
					_this.goods_data = res.data;
					_this.init_page(res);
				},
			});
		},
		//初始化数组
		init_page(res) {
			let _this = this;
			if (_this.objJudge(res.spec)) {
				for (let i = 0; i < res.spec.length; i++) {
					let item = res.spec[i];
					_this.$set(item, 'checked', false);
				}
				_this.sku_list = res.spec;
				_this.init_select();
			}
		},
		//初始化选中
		init_select() {
			let _this = this;
			// if (_this.objJudge(res.spec)) {
			let default_index = 0;
			for (let i = 0; i < _this.sku_list.length; i++) {
				const item = _this.sku_list[i];
				if (_this.skuid > 0 && _this.skuid == item.id) {
					default_index = i;
				}
			}
			_this.click_sku(_this.sku_list[default_index], 0, 1);
			// }
		},
		//点击sku时检查库存和更新价格
		click_sku(item, index, tt = 0) {
			let _this = this;
			this.sku_list.forEach(item => {
				item.checked = false;
			});
			_this.$set(item, 'checked', true);
			_this.stockinfo = item;

			if (tt == 0) {
				_this.check_skuid(item.id);
			} else {
				_this.change_data();
				_this.get_rela_price();
			}
		},

		//检查库存和更新价格
		check_skuid(spec_id) {
			let _this = this;
			_this.com_getdata({
				url: '/cart/sku',
				data: {
					spec_id,
				},
				data_fun: function (res) {
					if (res.state == 1) {
						_this.stockinfo.spec_store = res.spec_store;
						_this.change_data();
						_this.get_rela_price();
					} else {
						_this.com_msg(res.msg);
					}
				},
			});
		},
		change_data() {
			let _this = this;
			_this.up_skuid = _this.stockinfo.id;
			_this.spec_value = _this.stockinfo.spec_value;
		},
		//数量改变判断库存 并且更新价格
		chang_number(type) {
			let _this = this;
			let stock = _this.stockinfo.spec_store;
			if (type == 'add') {
				if (_this.inp_number < stock) {
					_this.inp_number++;
				} else {
					_this.show_tips(1);
				}
			} else if (type == 'reduce') {
				if (_this.inp_number > 1) {
					_this.inp_number--;
				} else {
					_this.show_tips(2);
				}
			} else if (type == 'input') {
				if (_this.inp_number > stock) {
					_this.show_tips(1);
					_this.inp_number = stock;
				} else if (_this.inp_number <= 0) {
					_this.inp_number = 1;
				}
			}
			_this.get_rela_price();
		},
		// 提示语
		show_tips(type) {
			let _this = this;
			let title = '';
			if (type == 1) {
				title = '数量超出范围~';
			} else if (type == 2) {
				title = '数量低于范围~';
			}
			if (!_this.com_loading({ status: 1, k: 'change_req', title, type: 'msg' })) return;

			// 提示后禁止点击太快
			setTimeout(() => {
				_this.com_loading({
					status: 0,
					k: 'change_req',
				});
			}, 1000);
		},
		// 更新价格
		get_rela_price() {
			let _this = this;
			let price = this.stockinfo.current_price * this.inp_number;
			let max_price = this.stockinfo.original_price * this.inp_number;

			this.show_price = price;
			this.show_max_price = max_price;

			// console.log({
			// 	up_skuid: _this.up_skuid,
			// 	inp_number: _this.inp_number,
			// 	show_price: _this.show_price,
			// 	show_max_price: _this.show_max_price,
			// })
		},

		confirm(type) {
			let _this = this;
			let order_type = type; // 0 购物车 1去购买  -2 更新选择sku

			let stock = _this.stockinfo.spec_store;
			if (_this.inp_number > stock) {
				_this.show_tips(1);
				return;
			}
			this.$emit('update_data', {
				skuid: this.up_skuid,
				spec_number: this.inp_number,
				spec_value: this.spec_value,
				order_type,
			});
			this.prophide();

			// if (this.order_type == 0) {
			// 	// 加入购物车
			// 	if (this.cartype == 0) {
			// 		this.addCar()
			// 	} else {
			// 		this.$emit('updatecars', this.up_skuid, this.inp_number)
			// 		this.prophide()
			// 	}
			// } else {
			// 	this.updatesku()
			// 	this.prophide()
			// 	this.addcartTo(`/index/order?ordert=1&skuid=${this.up_skuid}&gid=${this.gid}&quantity=${this.inp_number}`)
			// }
		},
	},
};
</script>

<style lang="scss">
.form_label {
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
}

.sku_wrap {
	background-color: #ffffff;
	position: relative;
	width: 100%;
	// border-radius: 48rpx 48rpx 0 0;
	z-index: 6;

	.wrapbg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.com_close {
		width: 60rpx;
		height: 60rpx;
	}

	.sku_btns {
		margin-top: 60rpx;
		width: 100%;
		padding: 10rpx 30rpx;
		// height: 120rpx;
		background: #ffffff;
		// box-shadow: 0px -2rpx 0px 0px #EDEDED;
		// padding: 0 14rpx;

		// display: flex;
		// align-items: center;
		// justify-content: center;

		.btn {
			// --btn_height: 78rpx;
			font-size: 30rpx;
		}

		.sbtn {
			height: 78rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			background-color: var(--status_b);

			font-size: 30rpx;
			font-weight: 400;
			color: var(--status_c);
			line-height: 30rpx;
			border-radius: 40rpx;
		}
	}

	.sku_info {
		width: 750rpx;
		// box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		// flex-direction: column;
		// align-items: center;
		position: relative;
		// top: -56rpx;

		.imgsbox {
			width: 150rpx;
			height: 150rpx;
			border-radius: 4rpx;
			background: #e8ebf1;
			// border: 6rpx solid #FFFFFF;
			flex-shrink: 0;
			overflow: hidden;

			.imgs {
				width: 100%;
				height: 100%;
				border-radius: 4rpx;
				display: block;
				// margin-right: 24rpx;
			}
		}

		.info_desc {
			padding-left: 10rpx;
			flex: 1;
			// display: flex;
			// flex-direction: column;
			//  align-items: center;
			.dd {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.stock {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.price {
			padding: 18rpx 0 18rpx 10rpx;
		}

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			width: 400rpx;
		}
	}

	.sku_main {
		width: 100%;
		// padding-top: 10rpx;
		box-sizing: border-box;
		// min-height: 300rpx;
		max-height: 500rpx;
		overflow-y: auto;

		.sku_content {
			padding: 0 20rpx 40rpx 36rpx;
			box-sizing: border-box;
		}

		.title {
		}

		.sku_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			box-sizing: border-box;
			margin-top: 10rpx;

			.sku_item {
				display: flex;
				align-items: center;
				justify-content: center;
				max-width: 100%;
				height: 52rpx;
				background: #e8ebf1;
				color: #333333;
				border-radius: 26rpx;
				padding: 0 22rpx;
				margin-top: 10rpx;
				margin-right: 10rpx;
				transition: all 0.3s;

				font-size: 28rpx;
				font-weight: 400;
				color: #333333;

				&.isimg {
					height: 152rpx;
					padding: 24rpx;

					// .text {
					// 	-webkit-line-clamp: 2;
					// 	width: 168rpx;
					// }
				}

				&.on {
					background: #1fd1c2;
					color: #ffffff;
				}

				.imgs {
					width: 102rpx;
					height: 102rpx;
					background: #5a6064;
					border-radius: 8rpx;
					margin-right: 22rpx;
				}

				.text {
					// max-width: 168rpx;
					// font-size: 26rpx;
					// color: #2A2A2A;
				}
			}
		}
	}

	.sku_add {
		margin-top: 20rpx;
		padding: 0 30rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

// @-webkit-keyframes myfirst {
// 	0% {
// 		bottom: -2000rpx;
// 	}

// 	100% {
// 		bottom: 0;
// 	}
// }

// @-webkit-keyframes myfirst2 {
// 	0% {
// 		opacity: 0;
// 	}

// 	100% {
// 		opacity: 1;
// 	}
// }
</style>
